<template>
  <section>
    <page-view>
      <template #option>
        <div class="btn-box">
          <el-button type="primary" @click="onAdd">新增</el-button>
        </div>
      </template>
      <template #form>
        <SearchForm :data-form="form" @onReset="onSearch" @on-search="onSearch">
          <el-form-item prop="orgCode">
            <SelectSearch v-model="form.orgCode" :info="COMP_SEARCH_CONF"></SelectSearch>
          </el-form-item>
          <el-form-item prop="codeOrName">
            <el-input v-model="form.codeOrName" clearable placeholder="请输入成本中心名称或编号"/>
          </el-form-item>
        </SearchForm>
      </template>
      <template #table="tableScope">
        <PubilcTable :isSlot="false" :list-config="TABLE_DATA_CONF" :page-data="pageData" :showIndex="false"
                     :table-data="tableData" :tableHeight="tableScope.tableHeight"
                     @on-action="onAction"/>
      </template>
    </page-view>
    <AddOrEdit v-if="dialogVisible" :dialogVisible="dialogVisible" :type="type" :dataForm="dataForm" @on-update="onSearch" @onClose="onDialClose"></AddOrEdit>
  </section>
</template>

<script name="costCenterConfig">
import {TABLE_DATA_CONF, COMP_SEARCH_CONF} from './config'
import {onMounted, reactive, toRefs} from 'vue'
import {ElMessageBox, ElMessage} from 'element-plus'
import api from '@/api'
import SelectSearch from '@/components/SelectSearch/index.vue'
import AddOrEdit from "@/views/costCenterConfig/components/AddOrEdit.vue";
import {createCostCenter} from "@/api/Reimbursement/costCenterConfig";

export default {
  components: {
    AddOrEdit,
    SelectSearch
  },
  setup() {
    const state = reactive({
      form: {
        orgCode: '',
        codeOrName: ''
      },
      COMP_SEARCH_CONF,
      TABLE_DATA_CONF,
      pageData: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      tableData: [],
      dialogVisible: false,
      type: '',
      dataForm: {}
    })

    const methods = {
      // 获取列表数据
      getList() {
        const params = {
          ...state.pageData,
          ...state.form
        }
        api.costCenter.listData(params).then(res => {
          state.pageData.total = res.total
          state.tableData = res.list
        })
      }
    }

    const handler = {
      // 搜索
      onSearch() {
        state.pageData.pageNum = 1
        methods.getList()
      },
      // 新增
      onAdd() {
        state.type = 'add'
        state.dialogVisible = true
      },
      // 编辑
      onEdit(row) {
        state.dataForm = {...row}
        state.type = 'edit'
        state.dialogVisible = true
      },
      onDialClose() {
        state.dataForm = {}
        state.dialogVisible = false
      },
      // 删除
      onDel(row) {
        ElMessageBox.confirm(
          '您确定要进行删除操作吗?',
          '温馨提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
        )
          .then(() => {
            api.costCenter.removeCostCenter(row.id).then(res => {
              handler.onSearch()
              ElMessage.success('操作成功')
            })
          })
      },
      // 列表操作
      onAction([item, row]) {
        const obj = {
          'pageNum': methods.getList,
          'pageSize': handler.onSearch,
          'edit': handler.onEdit,
          'del': handler.onDel,
        }
        if (typeof item === 'string') {
          state.pageData[item] = row
          obj[item]()
        } else {
          obj[item.alias](row)
        }
      },
    }

    onMounted(() => {
      handler.onSearch()
    })

    return {
      ...toRefs(state),
      ...handler
    }
  }
}
</script>

<style scoped>

</style>
